
<template>
  <el-dialog
    custom-class="addOrEditModal"
    :title="row ? '编辑' : '新增'"
    :visible.sync="open"
    :before-close="close"
    :fullscreen="true"
  >
    <el-form
      ref="form"
      :model="form"
      label-width="120px"
      class="demo-ruleForm"
      :rules="rules"
    >
      <div class="box">
        <el-form-item label="名称" prop="tableName">
          <el-input
            v-model="form.tableName"
            :disabled="!!row"
            clearable
            placeholder="请输入表名称"
            ><template slot="prepend">{{tablePrefix}}_</template></el-input
          >
        </el-form-item>
        <el-form-item label="描述" prop="tableComment">
          <el-input
            v-model="form.tableComment"
            clearable
            placeholder="请输入表描述"
          />
        </el-form-item>
        <el-form-item label="数据源" prop="dataSource">
          <el-select
            v-model="form.dataSource"
            placeholder="请选择数据源"
            style="width: 100%"
            :disabled="!!row"
          >
            <el-option label="本地数据源" value="1"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="排序" prop="sort">
          <el-input
            v-model="form.sort"
            clearable
            placeholder="请输入排序"
            type="number"
          />
        </el-form-item> -->
      </div>
    </el-form>
    <div class="tabs" style="position: relative" v-loading="loading">
      <p
        style="
          marign: 0;
          position: absolute;
          top: 0;
          left: 200px;
          font-size: 13px;
          color: red;
        "
      >
        (请先填写数据库属性并保存后再填写页面属性)
      </p>
      <el-tabs v-model="activeName" @tab-click="handletabClick">
        <el-tab-pane label="数据库属性" name="1">
          <div class="step1">
            <div class="step1_header">
              <el-button
                type="primary"
                icon="el-icon-plus"
                style="background: #2f54eb"
                size="small"
                @click="() => handleOperate()"
                >新增</el-button
              >
              <el-button
                icon="el-icon-delete"
                type="danger"
                size="small"
                @click="handleDelete"
                :disabled="!chooseList.length"
                >删除</el-button
              >
              <el-button
                icon="el-icon-plus"
                @click="handleOrginLoading"
                size="small"
                >新增系统字段</el-button
              >
              <span
                style="
                  font-size: 13px;
                  color: red;
                  margin-left:12px
                "
              >
                (如需该数据表对应树形表格，需确保添加 `parent_id`)
              </span>
            </div>
            <div class="table">
              <el-table
                :data="list_step1"
                border
                style="width: 100%"
                @selection-change="handleSelectionChange"
                size="mini"
                row-key="uuid"
                key="step1"
                ref="multipleTable"
                class="step1Table"
              >
                <el-table-column width="80" align="center">
                  <template>
                    <i class="el-icon-s-operation moveIcon"></i>
                  </template>
                </el-table-column>
                <el-table-column width="55" align="center">
                  <template slot="header">
                    <el-checkbox
                      v-model="checkAll"
                      :indeterminate="indeterminate"
                      @change="handleCheckAllChange"
                      disabled
                    ></el-checkbox>
                  </template>
                  <template slot-scope="scope">
                    <el-checkbox
                      v-model="ischeckedItem[`${scope.$index}`]"
                      @change="getCurrentRow(scope.row)"
                      :disabled="selectable(scope.row)"
                    ></el-checkbox>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="date"
                  label="序号"
                  width="80"
                  align="center"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.$index + 1 }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="columnName" label="" align="center">
                  <template slot="header">
                    <div class="header">
                      <span class="require">*</span>
                      <i class="el-icon-edit-outline"></i>
                      <span class="headTxt">字段名称</span>
                    </div>
                  </template>
                  <template slot-scope="scope">
                    <div
                      class="clickoutsideClass"
                      v-clickoutside="
                        () => handleClickOutside(scope, 'columnName')
                      "
                    >
                      <p
                        v-show="!scope.row[`isShow${'columnName'}`]"
                        class="tr_txt"
                        @click="() => handleInputEdit(scope, 'columnName')"
                      >
                        {{ scope.row.columnName }}
                      </p>
                      <el-input
                        v-show="scope.row[`isShow${'columnName'}`]"
                        v-model="scope.row.columnName"
                        clearable
                        @input="columnNameChange"
                      />
                      <p
                        class="tableInputRules"
                        :style="{
                          top: columnNameRules.length > 10 ? '-78px' : '-60px',
                        }"
                        v-show="
                          scope.row[`isShow${'columnName'}`] && columnNameRules
                        "
                      >
                        {{ columnNameRules }}
                      </p>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="columnComment" align="center">
                  <template slot="header">
                    <div class="header">
                      <span class="require">*</span>
                      <i class="el-icon-edit-outline"></i>
                      <span class="headTxt">字段描述</span>
                    </div>
                  </template>
                  <template slot-scope="scope">
                    <div
                      class="clickoutsideClass"
                      v-clickoutside="
                        () => handleClickOutside(scope, 'columnComment')
                      "
                    >
                      <p
                        v-show="!scope.row[`isShow${'columnComment'}`]"
                        class="tr_txt"
                        @click="() => handleInputEdit(scope, 'columnComment')"
                      >
                        {{ scope.row.columnComment }}
                      </p>
                      <el-input
                        v-show="scope.row[`isShow${'columnComment'}`]"
                        v-model="scope.row.columnComment"
                        clearable
                      />
                      <p
                        class="tableInputRules"
                        v-show="scope.row[`isShow${'columnComment'}`]"
                      >
                        字段描述不能为空
                      </p>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="colType" align="center">
                  <template slot="header">
                    <div class="header">
                      <span class="require">*</span>
                      <i class="el-icon-edit-outline"></i>
                      <span class="headTxt">字段类型</span>
                    </div>
                  </template>
                  <template slot-scope="scope">
                    <div
                      v-clickoutside="
                        () => handleClickOutside(scope, 'colType')
                      "
                    >
                      <p
                        v-show="!scope.row[`isShow${'colType'}`]"
                        class="tr_txt"
                        @click="() => handleInputEdit(scope, 'colType')"
                      >
                        {{
                          selectDictLabel(
                            dict.type.pt_app_db_column_type,
                            scope.row.colType
                          )
                        }}
                      </p>
                      <div v-show="scope.row[`isShow${'colType'}`]">
                        <el-select
                          v-model="scope.row.colType"
                          :popper-append-to-body="false"
                          popper-class="selectClass"
                          style="width: 100%"
                          @change="
                            (value) => handleColTypeChange(value, scope.row)
                          "
                        >
                          <el-option
                            v-for="item in dict.type.pt_app_db_column_type"
                            :key="item.id"
                            :label="item.label"
                            :value="item.value"
                          />
                        </el-select>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="colLength" align="center">
                  <template slot="header">
                    <div class="header">
                      <i class="el-icon-edit-outline"></i>
                      <span class="headTxt">字段长度</span>
                    </div>
                  </template>
                  <template slot-scope="scope">
                    <div
                      v-clickoutside="
                        () => handleClickOutside(scope, 'colLength')
                      "
                    >
                      <p
                        v-show="!scope.row[`isShow${'colLength'}`]"
                        class="tr_txt"
                        @click="() => handleInputEdit(scope, 'colLength')"
                      >
                        {{ scope.row.colLength }}
                      </p>
                      <div v-show="scope.row[`isShow${'colLength'}`]">
                        <el-input-number
                          v-model="scope.row.colLength"
                          :min="0"
                          :max="
                            scope.row.colType === 'varchar'
                              ? 4000
                              : scope.row.colType === 'bigint' ||
                                scope.row.colType === 'float'
                              ? 65
                              : 0
                          "
                        ></el-input-number>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="colPointLength" align="center">
                  <template slot="header">
                    <div class="header">
                      <i class="el-icon-edit-outline"></i>
                      <span class="headTxt">小数点位</span>
                    </div>
                  </template>
                  <template slot-scope="scope">
                    <div
                      v-clickoutside="
                        (e) => handleClickOutside(scope, 'colPointLength', e)
                      "
                    >
                      <p
                        v-show="!scope.row[`isShow${'colPointLength'}`]"
                        class="tr_txt"
                        @click="() => handleInputEdit(scope, 'colPointLength')"
                      >
                        {{ scope.row.colPointLength }}
                      </p>
                      <div v-show="scope.row[`isShow${'colPointLength'}`]">
                        <el-input-number
                          v-model="scope.row.colPointLength"
                          :min="0"
                          :max="30"
                        ></el-input-number>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <!-- <el-table-column
                  prop="address"
                  label="主键"
                  align="center"
                  width="120"
                >

                </el-table-column> -->
                <el-table-column prop="isNullable" align="center">
                  <template slot="header">
                    <div class="header">
                      <i class="el-icon-edit-outline"></i>
                      <span class="headTxt">允许空值</span>
                    </div>
                  </template>
                  <template slot-scope="scope">
                    <div>
                      <el-checkbox-group v-model="scope.row.isNullable">
                        <el-checkbox
                          :disabled="isNullableDisabled(scope.row)"
                          true-label="YES"
                          false-label="NO"
                        ></el-checkbox>
                      </el-checkbox-group>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane
          label="页面属性"
          name="2"
          :disabled="
            row
              ? form.tableName
                ? false
                : true
              : form.tableName && isSubmit
              ? false
              : true
          "
        >
          <div>
            <el-button
              type="primary"
              icon="el-icon-refresh"
              style="background: #2f54eb"
              size="small"
              @click="() => handleRefresh()"
              >刷新列表</el-button
            >
          </div>
          <div class="table">
            <el-table
              :data="list_step2"
              border
              style="width: 100%"
              size="mini"
              class="step2Table"
            >
              <el-table-column
                prop="date"
                label="序号"
                width="80"
                align="center"
              >
                <template slot-scope="scope">
                  <span>{{ scope.$index + 1 }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="label" label="字段描述" align="center">
              </el-table-column>
              <el-table-column prop="type" label="字段类型" align="center">
                <template slot-scope="scope">
                  {{
                    selectDictLabel(
                      dict.type.pt_app_form_column_type,
                      scope.row.type
                    )
                  }}
                </template>
              </el-table-column>
              <el-table-column prop="componentType" align="center">
                <template slot="header">
                  <div class="header">
                    <i class="el-icon-edit-outline"></i>
                    <span class="headTxt">显示类型</span>
                  </div>
                </template>
                <template slot-scope="scope">
                  <div
                    v-clickoutside="
                      () => handleClickOutside_step2(scope, 'componentType')
                    "
                  >
                    <p
                      v-show="!scope.row[`isShow${'componentType'}`]"
                      class="tr_txt"
                      @click="
                        () => handleInputEdit_step2(scope, 'componentType')
                      "
                    >
                      {{
                        selectDictLabel(
                          dict.type.pt_app_form_component_type,
                          scope.row.componentType
                        )
                      }}
                    </p>
                    <div v-show="scope.row[`isShow${'componentType'}`]">
                      <el-select
                        v-model="scope.row.componentType"
                        :popper-append-to-body="false"
                        popper-class="selectClass"
                        style="width: 100%"
                      >
                        <el-option
                          v-for="item in dict.type.pt_app_form_component_type"
                          :key="item.id"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="validRule" align="center">
                <template slot="header">
                  <div class="header">
                    <i class="el-icon-edit-outline"></i>
                    <span class="headTxt">校验规则</span>
                  </div>
                </template>
                <template slot-scope="scope">
                  <div
                    v-clickoutside="
                      () => handleClickOutside_step2(scope, 'validRule')
                    "
                  >
                    <p
                      v-show="!scope.row[`isShow${'validRule'}`]"
                      class="tr_txt"
                      @click="() => handleInputEdit_step2(scope, 'validRule')"
                    >
                      {{
                        selectDictLabel(
                          dict.type.pt_app_form_validrule,
                          scope.row.validRule
                        )
                      }}
                    </p>
                    <div v-show="scope.row[`isShow${'validRule'}`]">
                      <el-select
                        v-model="scope.row.validRule"
                        :popper-append-to-body="false"
                        popper-class="selectClass"
                        style="width: 100%"
                      >
                        <el-option
                          v-for="item in dict.type.pt_app_form_validrule"
                          :key="item.id"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="must" align="center">
                <template slot="header">
                  <div class="header">
                    <i class="el-icon-edit-outline"></i>
                    <span class="headTxt">必填</span>
                  </div>
                </template>
                <template slot-scope="scope">
                  <div>
                    <el-checkbox-group v-model="scope.row.must">
                      <el-checkbox
                        true-label="YES"
                        false-label="NO"
                      ></el-checkbox>
                    </el-checkbox-group>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="hidden" align="center">
                <template slot="header">
                  <div class="header">
                    <i class="el-icon-edit-outline"></i>
                    <span class="headTxt">是否隐藏</span>
                  </div>
                </template>
                <template slot-scope="scope">
                  <div>
                    <el-checkbox-group v-model="scope.row.hidden">
                      <el-checkbox
                        true-label="YES"
                        false-label="NO"
                      ></el-checkbox>
                    </el-checkbox-group>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import Sortable from "sortablejs";
import Clickoutside from "element-ui/src/utils/clickoutside";
import {
  addOrUpdateTable,
  getDetaillineTableInfo,
  getByTableName,
  formFields,
  save,
} from "@/api/app/dataModel/entityModel";
import { uuid } from "vue-uuid";

const disabledArrAy = [
  "create_dept",
  "create_by",
  "create_time",
  "update_by",
  "update_time",
  "process_status",
];
export default {
  name: "addOrEditModal",
  directives: {
    Clickoutside,
  },
  dicts: [
    "pt_app_db_column_type",
    "pt_app_form_validrule",
    "pt_app_form_column_type",
    "pt_app_form_component_type",
  ],
  props: {
    open: {
      type: Boolean,
      default: false,
    },
    close: {
      type: Function,
      default: () => {},
    },
    getList: {
      type: Function,
      default: () => {},
    },
    row: {
      type: String,
      default: "",
    },
    appId: {
      type: String,
      default: "",
    },
     tablePrefix:{
      type: String,
      default: "",
    }
  },
  data() {
    return {
      columnNameRules: "",
      activeName: "1",
      form: {
        dataSource: "1",
      },
      loading: false,
      chooseList: [],
      checkAll: false,
      indeterminate: false,
      ischeckedItem: {},
      detailData: {},
      list_step2: [],
      step2OtherMsg: undefined,
      tab2Disabled: true,
      isSubmit: false,
      list_step1: [
        {
          columnName: "create_dept",
          columnComment: "创建部门",
          colType: "varchar",
          colLength: 64,
          colPointLength: 0,
          isNullable: "YES",
          uuid: "1",
        },
        {
          columnName: "create_by",
          columnComment: "创建人",
          colType: "varchar",
          colLength: 64,
          colPointLength: 0,
          isNullable: "YES",
          uuid: "2",
        },
        {
          columnName: "create_time",
          columnComment: "创建日期",
          colType: "datetime",
          colLength: 0,
          colPointLength: 0,
          isNullable: "YES",
          uuid: "3",
        },
        {
          columnName: "update_by",
          columnComment: "更新人",
          colType: "varchar",
          colLength: 64,
          colPointLength: 0,
          isNullable: "YES",
          uuid: "4",
        },
        {
          columnName: "update_time",
          columnComment: "更新日期",
          colType: "datetime",
          colLength: 0,
          colPointLength: 0,
          isNullable: "YES",
          uuid: "5",
        },
        {
          columnName: "process_status",
          columnComment: "流程状态",
          colType: "varchar",
          colLength: 6,
          colPointLength: 0,
          isNullable: "YES",
          uuid: "6",
        },
      ],
      rules: {
        tableName: [
          { required: true, message: "请输入表名称", trigger: "blur" },
          {
            pattern: /^[a-zA-Z_][a-zA-Z0-9_]*$/,
            message: "表名称不能以数字开头且不能包含汉字、斜线、空格",
            trigger: "blur",
          },
        ],
        tableComment: [
          { required: true, message: "请输入表描述", trigger: "blur" },
        ],
      },
    };
  },
  watch: {
    // chooseList: {
    //   immediate: true,
    //   handler() {
    //     if (
    //       this.chooseList?.length &&
    //       this.chooseList?.length + 5 === this.list_step1?.length
    //     ) {
    //       this.checkAll = true;
    //       this.indeterminate = false;
    //     } else if (this.chooseList?.length) {
    //       this.indeterminate = true;
    //       this.checkAll = false;
    //     } else if (!this.chooseList?.length) {
    //       this.checkAll = false;
    //       this.indeterminate = false;
    //     }
    //   },
    // },
  },
  methods: {
    async handleRefresh() {
      this.loading = true;
      this.step2OtherMsg.formFields = this.list_step2;
      const res = await formFields(this.step2OtherMsg);
      if (res.code == 200) {
        this.$message.success("刷新成功");
        await this.getByTableNameList();
      }
      this.loading = false;
    },
    handleColTypeChange(value, row) {
      if (["longtext", "blob", "datetime","date"].includes(value)) {
        row.colLength = 0;
        row.colPointLength = 0;
      } else if (value === "varchar") {
        row.colLength = 64;
        row.colPointLength = 0;
      } else if (value === "bigint") {
        row.colLength = 10;
        row.colPointLength = 0;
      } else {
        row.colLength = 10;
        row.colPointLength = 2;
      }
    },
    columnNameChange(val) {
      this.columnNameRules = "";
      const ruleTxt = /^[a-zA-Z_][a-zA-Z0-9_]*$/;
      if (!val) return (this.columnNameRules = "字段名不能为空");
      if (val === "id") return (this.columnNameRules = "字段名不能为id");
      if (!ruleTxt.test(val)) {
        return (this.columnNameRules =
          "字段名不能以数字开头且不能包含汉字、斜线、空格");
      }
    },
    // handleCheckAllChange(val) {
    //   console.log(val);
    //   if (this.list_step1.length === 5) return;
    //   if (val) {
    //     this.chooseList = [...this.list_step1];
    //     this.chooseList = this.chooseList.filter(
    //       (item) => !disabledArrAy.some((ele) => ele === item.columnName)
    //     );
    //     this.chooseList.forEach((item, index) => {
    //       this.$set(this.ischeckedItem, index + 5, true);
    //     });
    //     this.checkAll = true
    //   } else {
    //     this.chooseList = [];
    //     for (let key in this.ischeckedItem) {
    //       this.ischeckedItem[key] = false;
    //     }
    //   }
    // },
    getCurrentRow(key) {
      let isHas = false;
      for (const item of this.chooseList) {
        if (item.uuid === key.uuid) {
          this.chooseList = this.chooseList.filter(
            (val) => val.uuid !== key.uuid
          );
          isHas = true;
          break;
        }
      }
      if (!isHas) {
        this.chooseList.push(key);
      }
    },
    handletabClick() {
      if (this.activeName === "2") {
        this.getByTableNameList();
      }
    },
    async getByTableNameList() {
      this.loading = true;
      const res = await getByTableName({
        tableName: `${this.tablePrefix}_` + this.form.tableName,
      });
      if (res.code === 200 && res.data?.formFields?.length) {
        this.list_step2 = res.data?.formFields;
        this.step2OtherMsg = res.data;
      }
      this.loading = false;
    },
    handleOrginLoading() {
      this.$message.warning("敬请期待");
    },
    handleSelectionChange(rows) {},
    handleOperate() {
      this.list_step1.splice(this.list_step1.length - 6, 0, {
        uuid: uuid.v1(),
        colType: "varchar",
        colLength: 255,
        colPointLength: 0,
        isNullable: "YES",
      });
      // this.list_step1 = [
      //   {
      //     uuid: uuid.v1(),
      //     colType: "varchar",
      //     colLength: 255,
      //     colPointLength: 0,
      //     isNullable: "YES",
      //   },
      //   ...this.list_step1,

      // ];
      if (this.chooseList?.length) {
        this.checkAll = false;
        this.indeterminate = true;
      } else {
        this.checkAll = false;
      }
    },
    handleDelete() {
      this.$confirm("此操作将删除选中数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(this.chooseList, this.list_step1);
          this.list_step1 = this.list_step1.filter(
            (item) => !this.chooseList.some((ele) => ele.uuid === item.uuid)
          );
          this.chooseList = [];
          this.ischeckedItem = {};
        })
        .catch(() => {});
    },
    selectable(row) {
      if (disabledArrAy.includes(row.columnName)) {
        return true;
      } else {
        return false;
      }
    },
    isNullableDisabled(row) {
      if (disabledArrAy.includes(row.columnName)) {
        return true;
      }
    },
    handleClickOutside(scope, type) {
      this.$set(this.list_step1, [scope.$index], {
        ...this.list_step1[scope.$index],
        [`isShow${type}`]: false,
      });
    },
    handleClickOutside_step2(scope, type) {
      this.$set(this.list_step2, [scope.$index], {
        ...this.list_step2[scope.$index],
        [`isShow${type}`]: false,
      });
    },
    handleInputEdit_step2(scope, type) {
      this.$set(this.list_step2, [scope.$index], {
        ...this.list_step2[scope.$index],
        [`isShow${type}`]: true,
      });
    },
    handleInputEdit(scope, type) {
      if (disabledArrAy.includes(scope.row.columnName)) return;
      if (
        (scope.row.colType === "varchar" || scope.row.colType === "bigint") &&
        type === "colPointLength"
      )
        return;
      if (
        (scope.row.colType === "longtext" ||
          scope.row.colType === "blob" ||
          scope.row.colType === "datetime") &&
        (type === "colPointLength" || type === "colLength")
      )
        return;
      this.$set(this.list_step1, [scope.$index], {
        ...this.list_step1[scope.$index],
        [`isShow${type}`]: true,
      });
    },
    handleSubmit() {
      this.$refs["form"].validate(async (valid) => {
        if (valid) {
          if (this.activeName === "1") {
            const columnInfos = JSON.parse(JSON.stringify(this.list_step1));
            let isPass = true;
            let index = 0;
            const ruleTxt = /^[^\s\u4e00-\u9fa5/\\]+$/;
            for (const item of columnInfos) {
              index++;
              if (!item.columnName) {
                this.$message.error(`序号为${index}的数据字段名称不能为空`);
                isPass = false;
                break;
              }
              if (!ruleTxt.test(item.columnName)) {
                this.$message.error(
                  `序号为${index}的数据字段名称不能以数字开头且不能包含汉字、斜线、空格`
                );
                isPass = false;
                break;
              }
              if (!item.columnComment) {
                this.$message.error(`序号为${index}的数据字段描述不能为空`);
                isPass = false;
                break;
              }
              if (!item.colType) {
                this.$message.error(`序号为${index}的数据字段类型不能为空`);
                isPass = false;
                break;
              }
            }
            if (!isPass) return;
            columnInfos.forEach((item) => {
              item.columnType = item.colType;
              if (item.colLength) {
                item.columnType = `${item.colType}(${item.colLength})`;
              }
              if (item.colLength && item.colPointLength) {
                item.columnType = `${item.colType}(${item.colLength},${item.colPointLength})`;
              }
            });
            const params = {
              columnInfos,
              tableName:  `${this.tablePrefix}_` + this.form.tableName,
              tableComment: this.form.tableComment,
              appId: this.appId,
              appTableId: this.row?.id,
              oldTableName: this.form?.oldTableName,
            };
            this.loading = true;
            try {
              const res = await addOrUpdateTable(params);
              if (res.code == 200) {
                this.$message.success(this.row ? "编辑成功" : "新增成功");
                this.isSubmit = true;

                this.getDetail();
              }
              this.loading = false;
            } catch (error) {
              this.loading = false;
            }
          } else {
            this.loading = true;
            this.step2OtherMsg.formFields = this.list_step2;
            try {
              const res = await save(this.step2OtherMsg);
              if (res.code == 200) {
                this.$message.success(this.row ? "编辑成功" : "新增成功");
              }
              this.loading = false;
            } catch (error) {
              this.loading = false;
            }
          }
        }
      });
    },
    rowDrop() {
      const tbody = document.querySelectorAll(
        ".step1Table .el-table__body-wrapper tbody"
      )[0];
      const _this = this;
      Sortable.create(tbody, {
        animation: 150,
        ghostClass: "ghost",
        handle: ".moveIcon",
        onEnd({ newIndex, oldIndex }) {
          const list = JSON.parse(JSON.stringify(_this.list_step1));
          const currRow = list.splice(oldIndex, 1)[0];
          list.splice(newIndex, 0, currRow);
          _this.list_step1 = [];
          _this.chooseList = [];
          _this.ischeckedItem = {};
          _this.checkAll = false;
          _this.indeterminate = false;
          _this.$nextTick(() => {
            _this.list_step1 = list;
          });
        },
      });
    },
    async getDetail() {
      this.loading = true;
      const res = await getDetaillineTableInfo({
        tableName: this.row ? this.row.tableName :  `${this.tablePrefix}_` + this.form.tableName,
      });
      if (res.code == 200) {
        this.detailData = res.data;
        this.$set(
          this.form,
          "tableName",
          res.data?.tableName.slice(this.tablePrefix?.length + 1, res.data?.tableName.length + 1)
        );
        this.$set(this.form, "tableComment", res.data?.tableComment);
        this.$set(this.form, "oldTableName", res.data?.oldTableName);
        this.list_step1 = res.data.columnInfos;
        this.list_step1.forEach((item) => {
          item.uuid = uuid.v1();
        });
      }
      this.loading = false;
    },
  },
  mounted() {
    if (this.row) {
      this.getDetail();
    }
    this.$nextTick(() => {
      this.rowDrop();
    });
  },
};
</script>
<style lang="scss" scoped>
.box {
  width: 100%;
  display: grid;
  // grid-template-rows: 50% 50%;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  // grid-template-rows: auto auto;
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  justify-items: stretch;
  align-items: start;
}
.tabs {
  ::v-deep .input-with-select {
    width: 300px;
  }
  ::v-deep .el-icon-search {
    color: #fff;
  }
}
.step1 {
  .ghost {
    opacity: 0.4;
  }
}
.table {
  margin-top: 8px;
  .tr_txt {
    margin: 0;
    height: 36px;
    line-height: 36px;
  }
  .clickoutsideClass {
    position: relative;
  }
  ::v-deep .el-table .cell {
    overflow: visible;
  }
  .tableInputRules {
    // display: inline-block;
    border-radius: 4px;
    padding: 8px 12px;
    color: #fff;
    background-color: #f56c6c;
    pointer-events: auto;
    position: absolute;
    z-index: 999;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 100%;
  }
  ::v-deep .el-icon-s-operation {
    font-size: 24px;
    cursor: move;
  }
  ::v-deep .header {
    display: flex;
    align-items: center;
    justify-content: center;
    .require {
      color: red;
      margin-top: 8px;
      margin-right: 3px;
      font-size: 18px;
    }
    .el-icon-edit-outline {
      font-size: 18px;
      margin-right: 5px;
    }
  }
}
</style>
